<template>
  <g
    id="selectorGroup0"
    transform="rotate(0.25224941968917847,99.49999046334925,53.99999995801384)"
    display="inline"
  >
    <path
      id="selectedBox0"
      fill="none"
      stroke="#4F80FF"
      shape-rendering="crispEdges"
      style="pointer-events:none"
      d="M18.24779319755791,20.25219341733881 L180.75218772880788,20.25219341733881 180.75218772880788,87.74780651548335 18.24779319755791,87.74780651548335z"
    ></path>
    <g display="inline">
      <circle
        id="selectorGrip_rotate_nw"
        fill="#000"
        r="8"
        stroke="#000"
        fill-opacity="0"
        stroke-opacity="0"
        stroke-width="0"
        style="cursor:url(/html/visualeditor/images/rotate.png) 12 12, auto;"
        cx="14.247793197557911"
        cy="16.25219341733881"
      ></circle>
      <circle
        id="selectorGrip_rotate_ne"
        fill="#000"
        r="8"
        stroke="#000"
        fill-opacity="0"
        stroke-opacity="0"
        stroke-width="0"
        style="cursor:url(/html/visualeditor/images/rotate.png) 12 12, auto;"
        cx="184.75218772880788"
        cy="16.25219341733881"
      ></circle>
      <circle
        id="selectorGrip_rotate_se"
        fill="#000"
        r="8"
        stroke="#000"
        fill-opacity="0"
        stroke-opacity="0"
        stroke-width="0"
        style="cursor:url(/html/visualeditor/images/rotate.png) 12 12, auto;"
        cx="184.75218772880788"
        cy="91.74780651548335"
      ></circle>
      <circle
        id="selectorGrip_rotate_sw"
        fill="#000"
        r="8"
        stroke="#000"
        fill-opacity="0"
        stroke-opacity="0"
        stroke-width="0"
        style="cursor:url(/html/visualeditor/images/rotate.png) 12 12, auto;"
        cx="14.247793197557911"
        cy="91.74780651548335"
      ></circle>
      <rect
        id="selectorGrip_resize_nw"
        width="8"
        height="8"
        fill="#4F80FF"
        stroke="rgba(0,0,0,0)"
        style="cursor:nw-resize"
        pointer-events="all"
        x="14"
        y="16"
      ></rect>
      <rect
        id="selectorGrip_resize_n"
        width="8"
        height="8"
        fill="#4F80FF"
        stroke="rgba(0,0,0,0)"
        style="cursor:n-resize"
        pointer-events="all"
        x="95"
        y="16"
      ></rect>
      <rect
        id="selectorGrip_resize_ne"
        width="8"
        height="8"
        fill="#4F80FF"
        stroke="rgba(0,0,0,0)"
        style="cursor:ne-resize"
        pointer-events="all"
        x="177"
        y="16"
      ></rect>
      <rect
        id="selectorGrip_resize_e"
        width="8"
        height="8"
        fill="#4F80FF"
        stroke="rgba(0,0,0,0)"
        style="cursor:e-resize"
        pointer-events="all"
        x="177"
        y="50"
      ></rect>
      <rect
        id="selectorGrip_resize_se"
        width="8"
        height="8"
        fill="#4F80FF"
        stroke="rgba(0,0,0,0)"
        style="cursor:se-resize"
        pointer-events="all"
        x="177"
        y="84"
      ></rect>
      <rect
        id="selectorGrip_resize_s"
        width="8"
        height="8"
        fill="#4F80FF"
        stroke="rgba(0,0,0,0)"
        style="cursor:s-resize"
        pointer-events="all"
        x="95"
        y="84"
      ></rect>
      <rect
        id="selectorGrip_resize_sw"
        width="8"
        height="8"
        fill="#4F80FF"
        stroke="rgba(0,0,0,0)"
        style="cursor:sw-resize"
        pointer-events="all"
        x="14"
        y="84"
      ></rect>
      <rect
        id="selectorGrip_resize_w"
        width="8"
        height="8"
        fill="#4F80FF"
        stroke="rgba(0,0,0,0)"
        style="cursor:w-resize"
        pointer-events="all"
        x="14"
        y="50"
      ></rect>
    </g>
  </g>
</template>

<script>
import { mapState, mapMutations } from "vuex";
export default {
  props: {
    value: {},
  },

  data() {
    return {};
  },
  mounted() {},
  methods: {
    ...mapMutations(["changeframeType"]),
    draw(e) {
      var that = this;
      var dom = this.$refs.draw;
      console.log(e.offsetY);
      dom.onmousemove = (eve) => {
        var x = e.clientX + eve.clientX - e.clientX - e.offsetX;
        var y = e.clientY + eve.clientY - e.clientY - e.offsetY;
        that.value.top = y;
        that.value.left = x;
        var w = this.value.width;
        var h = this.value.height;
        var svgDom = document.getElementById(that.value.id);
        const obj = {
          h1: h,
          w1: w,
          x1: x,
          y1: y,
        };
        this.changeframeType(obj);
        that.$emit("drawChange", this.value.id, x, y, w, h);
      };
      dom.onmouseup = (evt) => {
        dom.onmousemove = (evt) => {};
      };
    },
  },
};
</script>

<style lang="less" scoped>
.drawMain {
  position: absolute;
  top: 0;
  left: 0;
}
</style>
